import {useRef,useState} from 'react'
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import SaveIcon from '@mui/icons-material/Save'
import CancelIcon from '@mui/icons-material/Cancel';
import { useNavigate } from 'react-router-dom';
import { roomService } from '../../services';
import {useMessage} from '../../hooks';

export default function CreateRoom() {
    const { showError,showSuccess } = useMessage();
    const nameRef = useRef('');
    const capacityRef = useRef(10);
    const descriptionRef = useRef('');
    const [loading, setLoading] = useState(false);    
    const navigate = useNavigate();    

    const onSaveRoom = async () => {      
        setLoading(true);     
        const formValues = {
          Name: nameRef.current.value,
          Capacity: capacityRef.current.value,
          Description: descriptionRef.current.value,
        };
      
        if (formValues.Name && formValues.Capacity && formValues.Description) {                      
          try {
            await roomService.createRoom(formValues);
            showSuccess('saved data successfully');
            navigate('/rooms');
          } catch (err) {            
            showError(err);            
          } finally {
            setLoading(false); 
          }    
        } else {
          const errorMessage = 'Required fields have not been entered!';
          showError(`errors: ${errorMessage}`);          
          setLoading(false);
        }
      };
    return (
        <>
            <Box component="form" sx={{
                '& .MuiTextField-root': { mt: 3, width: '100%' },
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            }} noValidate autoComplete="off">
                <Stack sx={{ width: '40%' }}>
                    <h2>Create Room </h2>

                    <TextField required inputRef={nameRef}
                        id="outlined-required-name"
                        label="Room name"
                    />

                    <TextField
                        required fullWidth inputRef={capacityRef}
                        id="outlined-required-capacity"
                        type="number"
                        label="Capacity"
                        defaultValue={10}
                    />

                    <TextField required inputRef={descriptionRef}
                        id="outlined-multiline-description"
                        label="Description"
                        multiline
                        rows={4}
                    />

                    <Stack sx={{ mt: 3 }} direction='row' spacing={2}>
                        <Button

                            color="primary"
                            onClick={onSaveRoom}
                            loading={loading}
                            loadingPosition="start"
                            startIcon={<SaveIcon />}
                            variant="contained">
                            Save
                        </Button>
                        <Button
                            color="primary"
                            onClick={() => navigate(-1)}
                            loading={loading}
                            loadingPosition="start"
                            startIcon={<CancelIcon />}
                            variant="outlined">
                            Cancel
                        </Button>
                    </Stack>
                </Stack>
            </Box>          
        </>
    )
}
